<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <image class="icon back-btn" @click="gotoBack('Home')"
                src="">
            </image>
      <view class="title">百宝箱</view>
      <view class="more-btn">
        <uni-icons type="more" size="24" color="#333"></uni-icons>
      </view>
    </view>

    <!-- 内容区域 -->
     <scroll-view class="content" scroll-y>
      <!-- 遍历所有分类区块 -->
      <view class="section" v-for="(item, index) in listNav" :key="item.ppmsItemId">
        <!-- 分类标题 -->
        <text class="section-title" :style="getTitleColor(index)">{{ item.ppms_itemName }}</text>
        
        <!-- 网格布局 -->
        <view class="grid">
          <!-- 遍历当前分类下的所有子项 -->
          <view 
            class="grid-item" 
            v-for="(subItem, subIndex) in item.content" 
            :key="subItem.ppmsItemId"
            @click="navigateToLink(subItem.link)"
          >
            <!-- 图标图片 -->
            <image :src="subItem.image" class="item-icon" mode="aspectFit"></image>
            <!-- 文字描述 -->
            <text class="item-text">{{ subItem.ppms_itemName }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
        listNav:setData
    };
  },
  methods: {
    // 返回首页
        gotoBack() {
            uni.switchTab({
                url: `/pages/Home/index`
            });
        },
  },
  onLoad() {
    uni.request({
      url: 'https://storage.360buyimg.com/miniprogram-platform/configure-lowcode-platform-node/prod/json/prod/OKWPGip6.json?t=0.35665510231',
      method: 'GET',
      success: (res) => {
        // 在Vue中，使用this来访问组件实例和数据
        // 将请求到的数据赋值给listNav
        this.listNav = res.data.data;
        
        // 打印数据以检查是否正确获取
        console.log('获取的数据:', this.listNav);
      },
      fail: (err) => {
        console.error('请求失败:', err);
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      }
    });
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F5F5F5;
}
.back-btn {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.content {
  flex: 1;
}

.section {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  display: block;
  color: #1677FF; /* 默认3C专区颜色 */
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 网格项样式 */
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  margin-bottom: 16px;
}

.grid-item .icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item .text {
  font-size: 12px;
  color: #333333;
  text-align: center;
}
</style>